<template>
  <van-skeleton title :row="3" :loading="props.loading" />
  <div v-if="props.userList.length > 0">
    <van-card v-for="user in props.userList" :title="user.username" tag="前端"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
      <template #tags>
        <van-tag v-for="tag in user.tags" plain type="primary" style="margin: 8px 8px 0 0">{{
          tag
        }}</van-tag>
      </template>
      <template #footer>
        <van-button size="small">联系</van-button>
      </template>
    </van-card>
  </div>
  <van-empty v-else description="暂无用户" />
</template>

<script setup lang="ts">
import type { UserType } from '@/modules/user'
import { ref } from 'vue';

defineExpose({
  name: '用户卡片组件',
})

interface UserCardListProps {
  userList: UserType[]
  loading: boolean
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  userList: () => [] as UserType[],
  loading: () => false as boolean,
})
</script>
